<template>
  <div>
    <div class="search-term">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="虚拟主机名">
          <el-input placeholder="搜索条件" v-model.trim="searchInfo.virtual_name"></el-input>
        </el-form-item>
        <el-form-item label="ip地址">
          <el-input placeholder="搜索条件" v-model.trim="searchInfo.ip_address" :style="{width: '160px'}"></el-input>
        </el-form-item>
        <el-form-item label="机房" prop="server_idc">
          <el-select  clearable placeholder="机房" v-model="searchInfo.server_idc" :style="{width: '120px'}" >
            <el-option
                    v-for="(item, i) in server_idcenvOptions"
                    :key="i"
                    :label="item.item_name"
                    :value="item.item_value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="环境名">
          <el-select clearable placeholder="环境" v-model="searchInfo.env_name" :style="{width: '120px'}" >
            <el-option
                    v-for="(item, i) in envOptions"
                    :key="i"
                    :label="item.item_name"
                    :value="item.item_value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目"  prop="project_code_list">
          <el-select  clearable  filterable placeholder="请选择项目" v-model="searchInfo.project_code" >
            <el-option
                    v-for="(item, i) in projectOptions"
                    :key="i"
                    :label="item.project_fullname"
                    :value="item.project_code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit" type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <div>
        <el-form-item>
          <el-button @click="openDialog(null, 'create')" icon="el-icon-plus" type="primary">新增服务器</el-button>
          <el-button class="filter-item" type="primary" icon="el-icon-download" @click="handleClickExport(null, 'create')">数据导出</el-button>
        </el-form-item>
        </div>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      border
      style="width: 100%"
    >
    <el-table-column label="ID" width="50" prop="ID">
        <template slot-scope="scope">{{scope.row.ID}}</template>
    </el-table-column>
    <el-table-column label="服务器code"  >
        <template slot-scope="scope" align="center" :show-overflow-tooltip="true" >
          <router-link :to="{name: 'virtualsecurity', params:{id:scope.row.virtual_code}}" class="link-type">
            <span>{{ scope.row.virtual_code }}</span>
          </router-link>
        </template>
     </el-table-column>
    <el-table-column label="虚拟主机名" prop="virtual_name" ></el-table-column>
    <el-table-column label="服务器机房" prop="server_idc" >
      <template slot-scope="scope">{{scope.row.server_idc | basecode(scope.row.server_idc,'server_idc')}}</template>
    </el-table-column>
    <el-table-column label="ip地址" prop="ip_address"  ></el-table-column>
    <el-table-column label="操作系统" prop="os_system" ></el-table-column>
    <el-table-column label="环境" prop="env_name" >
      <template slot-scope="scope">{{scope.row.env_name | basecode(scope.row.env_name,'env_name')}}</template>
    </el-table-column>
    <el-table-column label="核数" prop="cpu_num" ></el-table-column>
    <el-table-column label="内存" prop="mem_info" ></el-table-column>
    <el-table-column label="磁盘" prop="disk_space" ></el-table-column>
    <el-table-column label="日期" >
        <template slot-scope="scope">{{scope.row.CreatedAt|formatDate}}</template>
      </el-table-column>
    <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button type="success" icon="el-icon-star-off" size="mini" @click="openDialog(scope.row.ID, 'find') ">详情</el-button>
          <el-button class="table-button" @click="openDialog(scope.row.ID, 'edit')" size="small" type="primary" icon="el-icon-edit">变更</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteDialog(scope.row) ">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                :style="{float:'right',padding:'20px'}"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
  </div>
</template>

<script>

  import {
    getServerList,
    deletebServer,
    exportExcel,
} from "@/api/cmdb_server";
  import { getSecurityList } from "@/api/cmdb_security";
  import { getProjectList  }  from "@/api/cmdb_project";
  import { formatTimeToStr } from "@/utils/date";
  import infoList from "@/mixins/infoList";

  export default {
      name: "virtualMachine",
      mixins: [infoList],
      data() {
       return {
          listApi: getServerList,
          statusOptions:[],
          envOptions:[],
          server_idcenvOptions:[],
          projectOptions:[],
          getSecurityOptions: [],
          deleteVisible: false,
       }
      },
    filters: {
    formatDate: function(time) {
      if (time != null && time != "") {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd");
      } else {
        return "";
      }
    },
    formatBoolean: function(bool) {
      if (bool != null) {
        return bool ? "是" :"否";
      } else {
        return "";
      }
    }
    },
    watch: {
      '$route.path': function (newVal, oldVal) {
        if(oldVal==='/layout/cmdb/virtualDetail'&&newVal==='/layout/cmdb/virtual'){
        this.getTableData();
        }
        }
  },
    methods: {
      //条件搜索前端看此方法
      onSubmit() {
        this.page = 1
        this.pageSize = 100
        if (this.searchInfo.status==""){
          this.searchInfo.status=null
        }
        this.getTableData()
        console.log(this.total)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      openDialog(id, type="") {
      this.type = "create";
      this.$router.push({name:'virtualDetail', query: { id: id, type: type }})
      },
      handleClickExport() {
          let params = this.searchInfo       // 按条件检索后 去导出excel
          params.fileName = 'sever列表.xlsx'   // excel下载的文件名
          // exportExcel({fileName: 'sever列表.xlsx'})
          exportExcel(params)
      },

      deleteDialog(row) {
                getSecurityList({'page':1,'pageSize': 9999,'virtual_code': row.virtual_code}).then(response => {
                   this.getSecurityOptions = response.data.total;
                   if (this.getSecurityOptions == 0) {
                      //console.log("o")
                         this.$confirm("此操作将永久删除该, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(async () => {
                        this.visible = false;
                        const res = await  deletebServer({ ID: row.ID });
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                          await  this.getTableData();
                        }
                    }).catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
                   }
                   else {
                      this.$message({
                            type: "warning",
                            message: "请提前删除安全组策略"
                          });
                       }
                 })

      },
    },
   async created() {
      this.page = 1;
      this.pageSize = 10;
      await this.getTableData();
      this.envOptions = this.getDicItemList('env_name');
      this.server_idcenvOptions = this.getDicItemList('server_idc')
      getProjectList({'page':1,'pageSize': 100}).then(response => {
        this.projectOptions = response.data.list;
      });
      //this.statusOptions = this.getDicItemList('sys_common_status')
      }
  }
</script>

<style  scoped lang="scss">
  a:link {color: blue}
  a:visited {color: blue}
  a:hover {color: black}
  a:active {color: yellow}
</style>
